<template>
  <div class="view-box info-box">
    <info-title title="用户信息" icon="el-icon-s-custom"></info-title>
    <div class="info-content">
      <div class="search-box">
        <el-button type="primary" size="small" @click="addUserBtn"
          >新增</el-button
        >
        <el-button type="success" size="small" @click="exportUsers"
          >导出</el-button
        >
      </div>
      <!-- 表格 -->
      <el-table
        class="user-table"
        size="small"
        :data="tableData"
        stripe
        :header-cell-style="{ background: '#F5F7FA', color: '#606266' }"
        border
        height="90%"
      >
        <el-table-column prop="username" label="账号"></el-table-column>
        <el-table-column prop="roles.name" label="角色"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag type="success" size="small" v-if="scope.row.status == '0'"
              >正常</el-tag
            >
            <el-tag type="danger" size="small" v-if="scope.row.status == '1'"
              >禁用</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="updateUser(scope.row)" type="text" size="small"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              :style="{
                color: scope.row.status == '0' ? '#f56c6c' : '#67c23a',
              }"
              @click="updateStatus(scope.row)"
              >{{ scope.row.status == "0" ? "禁用" : "启用" }}</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="deleteUser(scope.row)"
              style="color: #f56c6c"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="table-page">
        <el-pagination
          :total="10"
          background
          layout="total,prev, pager, next"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// 导入标题组件
import infoTitle from "../../../../components/common/info-title";
import { getUesrs, deleteUser, updateUser } from "../../../../api/user";
export default {
  inject: ["reload"],
  data() {
    return {
      // 表格数据
      tableData: [],
      formLabelWidth: "120px",
    };
  },
  components: { infoTitle },
  mounted() {
    this.getUesrList();
  },
  methods: {
    // 新增按钮事件
    addUserBtn() {
      this.$router.push({
        path: "/system/user_ae",
      });
    },
    // 获取用户信息
    getUesrList() {
      getUesrs().then((res) => {
        if (res.success) this.tableData = res.data;
      });
    },
    // 导出按钮事件
    exportUsers() {},
    /**
     * 更新数据
     */
    updateUser(data) {
      this.$router.push({
        name: "user_ae",
        params: data,
      });
    },
    updateStatus(data) {
      console.log("用户状态更改", data);
      if (data.status == "0") {
        data.status = 1;
      } else {
        data.status = 0;
      }
      updateUser(data).then((res) => {
        this.$message({
          message: "用户状态更改成功",
          type: "success",
          offset: 70,
        });
        this.reload();
      });
    },
    /**
     * 移除用户
     */
    deleteUser(user) {
      deleteUser(user.id).then((res) => {
        if (res.success == true) {
          this.$message({
            message: "用户删除成功",
            type: "success",
            offset: 70,
          });
          this.reload();
        }
      });
    },
  },
};
</script>

<style scoped>
.view-box {
  padding: 10px;
}
.info-content {
  overflow-y: auto;
  padding: 0.5rem;
}
.user-table {
  height: 100%;
  overflow-y: auto;
}
.search-box {
  margin: 0rem 0.5rem 0.5rem 0.5rem;
  text-align: right;
}
.table-page {
  margin: 0.5rem -5px 0rem 0rem;
  text-align: right;
}
.input-width {
  width: 450px;
}
</style>